<template>
  <con-view :loading="loading" :body-style="{ height: '100%'}">
    <flex-box mode="column" align-items="stretch" class="create-container">
      <flex-box class="create-header">
        <span class="title">{{ title }}</span>
        <img class="close" src="/image/close.png" @click="handleClose">
      </flex-box>
      <div class="create-flex">
        <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item name="basicInfo">
                <template slot="title">
                  <span>基本信息</span>
                  <i class="header-icon el-icon-info" />
                </template>
                <el-form :model="model" ref="form"  :rules="rules" :inline="true" size="mini" label-width="125px">
                    <el-row :gutter="24" class="form-item-group" >
                        <el-col :span="8">
                          <el-form-item label="订单号：" prop="purchaseOrderNo">
                            <el-input  v-model="model.purchaseOrderNo" placeholder="订单号" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="合同编号：" prop="contractNo">
                            <el-input v-model="model.contractNo"  disabled placeholder="系统自动生成" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="合同名称：" prop="contractName">
                            <el-input v-model="model.contractName" placeholder="请输入合同名称" />
                          </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                        <el-col :span="8">
                          <el-form-item label="公司编号：" prop="companyNo">
                            <el-input  v-model="model.companyNo" placeholder="公司编号" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="负责人员：" prop="dutyPerson">
                            <el-input  v-model="model.dutyPerson" placeholder="负责人员" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="合同类型：" prop="contractType">
                              <el-select v-model="model.contractType" size="mini" style="width: 92.2%;" clearable>
                              </el-select>
                          </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                        <el-col :span="8">
                          <el-form-item label="合同属性：" prop="contractProperty">
                            <el-select v-model="model.contractProperty" size="mini" style="width: 92.2%;" clearable>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="交易条款简述：" prop="tradeTermDesc">
                            <el-input  v-model="model.tradeTermDesc" placeholder="交易条款简述" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="项目名称：" prop="projectName">
                            <el-select v-model="model.projectName" size="mini" style="width: 92.2%;" clearable>
                            </el-select>
                          </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                        <el-col :span="8">
                          <el-form-item label="甲方编码：" prop="verdorCode">
                            <el-input v-model="model.verdorCode" class="filter-item" placeholder="甲方编码" style="width: 92.2%;">
                              <i slot="suffix" class="el-input__icon el-icon-search" @click="openVerdorCodeSelector" />
                            </el-input>
                          </el-form-item>
                          <contract-select :visible.sync="contractSelectorVisible2" @selected="handleVerdorCodeSelector" />
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="甲方名称：" prop="vendornm">
                            <el-input v-model="model.vendornm" placeholder="甲方名称" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="乙方编码：" prop="customerNo">
                            <el-input v-model="model.customerNo" placeholder="乙方编码" class="filter-item" style="width: 92.2%;">
                              <i slot="suffix" class="el-input__icon el-icon-search" @click="openCustomerNoSelector" />
                            </el-input>
                          </el-form-item>
                          <contract-select :visible.sync="contractSelectorVisible3" @selected="handleCustomerNoSelected" />
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                        <el-col :span="8">
                          <el-form-item label="乙方名称：" prop="customerName">
                            <el-input v-model="model.customerName" placeholder="乙方名称" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="合同签订日期：" prop="contractSignDate">
                            <el-date-picker v-model="model.contractSignDate" type="date" placeholder="合同签订日期"c style="width: 85.2%" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="合同签订地址：" prop="contractSignAddress">
                            <el-input v-model="model.contractSignAddress" placeholder="合同签订地址" />
                          </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                        <el-col :span="8">
                          <el-form-item label="合同有效开始日期：" prop="contractEffectDate">
                            <el-date-picker v-model="model.contractEffectDate" type="date" placeholder="合同有效开始日期" style="width: 85.2%" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="合同失效日期：" prop="contractUneffectDate">
                            <el-date-picker v-model="model.contractUneffectDate" type="date" placeholder="合同失效日期" style="width: 85.2%" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="付款方式：" prop="paymentType">
                            <el-select v-model="model.paymentType" size="mini" style="width: 92.2%;" clearable>
                            </el-select>
                          </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                        <el-col :span="8">
                          <el-form-item label="交易货币：" prop="currencyCode">
                            <el-select v-model="model.currencyCode" size="mini" style="width: 92.2%;" clearable>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="付款账期：" prop="paymenTerms">
                            <el-select v-model="model.paymenTerms" size="mini" style="width: 92.2%;" clearable>
                              <el-option v-for="option in paymenTerms" :key="option.name" :label="option.name" :value="option.value" />
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="价格失效日期：" prop="priceUneffectDate">
                            <el-date-picker v-model="model.priceUneffectDate" type="date" placeholder="价格失效日期" style="width: 85.2%" />
                          </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                        <el-col :span="8">
                          <el-form-item label="产品编码：" prop="productCodeproductCode">
                            <el-input v-model="model.productCode" placeholder="产品编码" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="交易产品日期：" prop="productCodeName">
                            <el-date-picker v-model="model.productCodeName" type="date" placeholder="价格失效日期" style="width: 85.2%" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="运输方式：" prop="transportType">
                            <el-select v-model="model.transportType" size="mini" style="width: 92.2%;" clearable>
                            </el-select>
                          </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                        <el-col :span="8">
                          <el-form-item label="发货国家：" prop="departureCountry">
                            <el-select v-model="model.departureCountry" size="mini" style="width: 92.2%;" clearable>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="发货港口：" prop="departureHarbor">
                            <el-select v-model="model.departureHarbor" size="mini" style="width: 92.2%;" clearable>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="到货国家：" prop="deliveryCountry">
                            <el-select v-model="model.deliveryCountry" size="mini" style="width: 92.2%;" clearable>
                            </el-select>
                          </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                        <el-col :span="8">
                          <el-form-item label="到货港口：" prop="deliveryHarbor">
                            <el-select v-model="model.deliveryHarbor" size="mini" style="width: 92.2%;" clearable>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="送货地址：" prop="deliveryAddress">
                            <el-input v-model="model.deliveryAddress" placeholder="送货地址" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="海外运输费：" prop="overseasFreightFee">
                            <el-input v-model="model.overseasFreightFee" placeholder="海外运输费" />
                          </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                        <el-col :span="8">
                          <el-form-item label="国内运输费：" prop="domesticFreightFee">
                            <el-input v-model="model.domesticFreightFee" placeholder="国内运输费" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="保险费：" prop="insuranceExpense">
                            <el-input v-model="model.insuranceExpense" placeholder="保险费" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="托盘费：" prop="palletCost">
                            <el-input v-model="model.palletCost" placeholder="托盘费" />
                          </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                        <el-col :span="8">
                          <el-form-item label="信用：" prop="creditCost">
                            <el-input v-model="model.creditCost" placeholder="信用" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="佣金：" prop="commission">
                            <el-input v-model="model.commission" placeholder="佣金" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="发货条款：" prop="deliveryTermDesc">
                            <el-input v-model="model.deliveryTermDesc" placeholder="发货条款" />
                          </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24" class="form-item-group">
                        <el-col :span="8">
                          <el-form-item label="送货时长：" prop="deliveryTerm">
                            <el-input v-model="model.deliveryTerm" placeholder="送货时长" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="收货人编码：" prop="consigneeId">
                            <el-input v-model="model.consigneeId" class="filter-item" placeholder="收货人编码" style="width: 92.2%;">
                              <i slot="suffix" class="el-input__icon el-icon-search" @click="openToSelector" />
                            </el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="收货人名称：" prop="consigneeName">
                            <el-input v-model="model.consigneeName" placeholder="甲方名称" />
                          </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
              </el-collapse-item>
              <el-collapse-item name="itemInfo">
                <template slot="title">
                  <span>明细信息</span>
                  <i class="header-icon el-icon-info" />
                </template>
                <el-button type="primary" style="margin-top: 6px; margin-bottom: 1px;" size="mini" @click="handleItemFormDisplay">填写明细</el-button>
                <el-button type="primary" style="margin: 6px 0px 0px 5px; margin-bottom: 1px;" size="mini" @click="handleAddTerms">添加条款</el-button>
                <el-button type="primary" style="margin: 6px 0px 0px 5px; margin-bottom: 1px;" size="mini" @click="openUploadDialog">上传附件</el-button>
                <el-button v-if="itemDisplay" type="primary" style="margin: 6px 0px 0px 5px; margin-bottom: 1px;" size="mini" @click="handleItemAdd">添加</el-button>
                <el-button v-if="termsDisplay" type="primary" style="margin: 6px 0px 0px 5px; margin-bottom: 1px;" size="mini" @click="handleTermsAdd">添加</el-button>
                <el-card v-if="itemDisplay" class="box-card">
                  <el-form ref="itemForm" :model="itemData" :inline="true" size="mini" label-width="125px">
                    <el-row :gutter="24" class="form-item-group">
                      <el-col :span="8">
                        <el-form-item label="物料名称：">
                          <el-input v-model="itemData.materialName" class="filter-item" disabled style="width: 92.2%;">
                            <i slot="suffix" class="el-input__icon el-icon-search" @click="openContractSelector" />
                          </el-input>
                        </el-form-item>
                        <contract-select :visible.sync="contractSelectorVisible" @selected="handleContractSelected" />
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="产品数量：">
                          <el-input v-model="itemData.qty" type="number"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="产品单位：">
                          <el-select v-model="itemData.measUnit" size="mini" style="width: 92.2%;" clearable>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                      <el-col :span="8">
                        <el-form-item label="产品单价：">
                          <el-input v-model="itemData.price" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="价格单位：">
                          <el-select v-model="itemData.priceUnit" size="mini" style="width: 92.2%;" clearable>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="总价：">
                          <el-input v-model="itemData.amount" disabled/>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                      <el-col :span="8">
                        <el-form-item label="税率：">
                          <el-input v-model="itemData.taxRate" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="不含税单价：">
                          <el-input v-model="itemData.untaxedPrice"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="不含税总价：">
                          <el-input v-model="itemData.untaxedAmount" />
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                      <el-col :span="8">
                        <el-form-item label="税额：">
                          <el-input v-model="itemData.taxAmount" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="规格：">
                          <el-select v-model="itemData.specifications" size="mini" style="width: 92.2%;" clearable>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="皮重：">
                          <el-input v-model="itemData.tare"  />
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                      <el-col :span="8">
                        <el-form-item label="件数：">
                          <el-input v-model="itemData.piecesNo"  />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="包装单位：">
                          <el-select v-model="itemData.packing" size="mini" style="width: 92.2%;" clearable>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="包装数量：">
                          <el-input v-model="itemData.packQty"  />
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="24" class="form-item-group">
                      <el-col :span="8">
                        <el-form-item label="是否商检：">
                          <el-select v-model="itemData.isInspection" size="mini" style="width: 92.2%;" clearable>
                            <el-option v-for="option in isJudge" :key="option.name" :label="option.name" :value="option.value" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="是否产地证：">
                          <el-select v-model="itemData.isPlaceCert" size="mini" style="width: 92.2%;" clearable>
                            <el-option v-for="option in isJudge" :key="option.name" :label="option.name" :value="option.value" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="托盘要求：">
                          <el-input v-model="itemData.palletNoteText"  />
                        </el-form-item>
                      </el-col>
                    </el-row>

                  </el-form>
                </el-card>

                <el-card v-if="termsDisplay" class="box-card">
                  <el-form ref="termsForm" :model="termsData" :inline="true" size="mini" label-width="125px">
                    <el-row :gutter="24" class="form-item-group">
                      <el-col :span="8">
                        <el-form-item label="条款：">
                          <el-input v-model="termsData.terms"  />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-card>


                <el-divider />
                <el-table
                          :data="model.itemList"
                          border
                          stripe
                          fit
                          highlight-current-row>
                    <el-table-column align="center" label="序号" width="95" fixed="left">
                      <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="物料名称" align="center" fixed="left">
                      <template slot-scope="scope">
                          <span>{{ scope.row.materialName }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="交易产品数量" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.qty }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="交易产品单位" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.price}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="交易产品单价" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.price }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="价格单位" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.priceUnit }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="总价" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.amount }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="税率" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.taxRate }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="不含税单价" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.untaxedPrice }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="不含税总价" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.untaxedAmount }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="税额" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.taxAmount }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="规格" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.specifications }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="包装单位" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.packing }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="包装数量" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.packQty }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="是否商检" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.isInspection }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="是否产地证" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.isPlaceCert }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="托盘要求" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.palletNoteText }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
                      <template slot-scope="scope">
                        <!-- <el-button type="text" @click="handleItemEdit(scope.row)">修改</el-button>
                        <el-button type="text" @click="handleItemDelete(scope.row)">删除</el-button> -->
                      </template>
                    </el-table-column>
                </el-table>


                <el-row :gutter="24" class="form-item-group">
                    <el-col :span="12">
                      <el-table
                                :data="model.termsList"
                                border
                                stripe
                                fit
                                highlight-current-row>
                          <el-table-column align="center" label="序号" width="95">
                            <template slot-scope="scope">
                              <span>{{ scope.$index + 1 }}</span>
                            </template>
                          </el-table-column>
                          <el-table-column label="条款" align="center">
                            <template slot-scope="scope">
                              <span>{{ scope.row.terms }}</span>
                            </template>
                          </el-table-column>
                          <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                              <span></span>
                            </template>
                          </el-table-column>
                      </el-table>
                    </el-col>
                    <el-col :span="12">
                        <el-table
                                  border
                                  stripe
                                  fit
                                  highlight-current-row>
                            <el-table-column align="center" label="序号" width="95">
                              <template slot-scope="scope">
                                <span>11</span>
                              </template>
                            </el-table-column>
                            <el-table-column label="附件" align="center">
                              <template slot-scope="scope">
                                <span>111</span>
                              </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                              <template slot-scope="scope">
                                <span>111</span>
                              </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>

              </el-collapse-item>
            </el-collapse>
      </div>
      <div class="handle-bar">
        <el-button class="handle-button" @click.native="handleClose">取消</el-button>
        <el-button class="handle-button" type="primary" @click.native="handleSubmit">提交</el-button>
      </div>

      <div class="dialog_container">
        <el-dialog :title="uploadDialog.title" :visible.sync="uploadDialog.visible" width="400px" append-to-body>
          <div>
            <el-upload
              ref="upload"
              :limit="1"
              :multiple="false"
              :headers="uploadData.headers"
              :action="uploadData.url"
              :disabled="uploadData.isUploading"
              :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess"
              :on-error="handleFileError"
              :auto-upload="true"
              :show-file-list="true"
              drag
            >
              <i class="el-icon-upload" />
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="confirmUploadDialog">确 定</el-button>
              <el-button @click="resetUploadDialog">取 消</el-button>
            </div>
          </div>
        </el-dialog>
      </div>
    </flex-box>
  </con-view>
</template>

<script>
import SaveMixin from '@/mixins/Save'
import AuthUtils from '@/utils/AuthUtils'
import ContractSelect from './ContractSelect.vue'

export default {
  name: 'CustomerSave',
  mixins: [SaveMixin],
  components: {
    ContractSelect
  },
  props: {
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '合同信息',
      activeNames: [
              'basicInfo',
              'itemInfo'],
      itemDisplay: false,
      termsDisplay: false,
      contractSelectorVisible: false,
      contractSelectorVisible2: false,
      contractSelectorVisible3: false,
      model: {
        contractCode: null,
        contractName: null,
        itemList: [],
        termsList:[]
      },
      usageScenarios: [],
      rules: {
        contractName: [{ required: true, message: '合同名称不能为空', trigger: ['blur', 'change'] }]
      },
      uploadDialog: {
        title: '附件上传',
        visible: false
      },
      attach: {
        id: null,
        applyAttachmentUrl: null
      },
      loading: true,
      multipleSelection: [],
      uploadData: {
        headers: { Authorization: 'Bearer ' + AuthUtils.getToken() }, // 上传请求头
        url: process.env.VUE_APP_BASE_API + '/system/attachment/upload' // 上传的地址
      },
      paymenTerms: [
              {
                  name: '1',
                  value: 1
              },{
                  name: '2',
                  value: 2
              },
              {
                  name: '3',
                  value: 3
              },
              {
                  name: '4',
                  value: 4
              }],
      isJudge: [
              {
                  name: '是',
                  value: 0
              },{
                  name: '否',
                  value: 1
              }],
      itemData: {},
      termsData:{}
    }
  },
  mounted() {

    this.loading = false
  },
  methods: {
    handleSubmit() {
      let formValid = false
      this.$refs.basicForm.validate(valid => { formValid = valid })
      this.$refs.detailForm.validate(valid => { formValid = valid })
    },
    handleProvinceSelected(value) {
      this.model.province = value.value
    },
    handleCitySelected(value) {
      this.model.city = value.value
    },
    handleAreaSelected(value) {
      this.model.district = value.value
    },
    handleUsageScenariosChange(val) {
      this.model.usageScenarios = this.usageScenarios.join(',')
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.uploadData.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.uploadData.isUploading = false
      if (response.code === 200) {
        this.attach.applyAttachmentUrl = response.data[0].fileUrl
      } else {
        fileList.pop()
        this.$message.error(response.msg)
      }
    },
    resetUploadDialog() {
      this.uploadDialog.visible = false
      this.attach = {
        id: null,
        applyAttachmentUrl: null
      }
    },
    // 文件上传失败处理
    handleFileError(response, file, fileList) {
      this.uploadData.isUploading = false
    },
    confirmUploadDialog() {
      FinCustomerCreditApplicationApi.edit(this.attach).then(response => {
        this.$message.success('附件添加成功')
        this.uploadDialog.visible = false
        this.handleQuery()
      })
    },
    openUploadDialog() {
      let that = this;
        that.resetUploadDialog()
        that.uploadDialog.visible = true
        const ids =  that.multipleSelection.map(item => item.id)
         that.finCreditBill.id = ids[0];
         const id = this.finCreditBill.id
     },
    handleItemFormDisplay(){
      if(this.itemDisplay){
        this.itemDisplay = false;
      }else{
        this.termsDisplay = false;
        this.itemDisplay = true;
      }
      this.itemData = {}
    },
    handleAddTerms(){
      if(this.termsDisplay){
        this.termsDisplay = false;
      }else{
        this.itemDisplay = false;
        this.termsDisplay = true;
      }
      this.termsData = {}
    },
    handleChange(val) {
         console.log(val)
    },
    openToSelector() {
      /* this.toSelectorVisible = true */
    },
    openVerdorCodeSelector() {
      this.contractSelectorVisible2 = true
    },
    openCustomerNoSelector() {
      this.contractSelectorVisible3 = true
    },
    handleItemAdd() {
        const data = {
          ...this.itemData
        }
        this.model.itemList.push(data)
        this.itemData = {}
        this.$message.success('添加成功！')
    },
    handleTermsAdd() {
        const data = {
          ...this.termsData
        }
        this.model.termsList.push(data)
        this.termsData = {}
        this.$message.success('添加成功！')
    },
    openContractSelector() {
      this.contractSelectorVisible = true
    },
    handleContractSelected(obj) {
      console.log(obj)
    },
    handleVerdorCodeSelector(obj){
        this.model.verdorCode=obj.id,
        this.model.vendornm=obj.customerName
    },
    handleCustomerNoSelected(obj){
      this.model.customerNo=obj.id,
      this.model.customerName=obj.customerName

    }

  }
}
</script>

<style lang="scss" scoped>
.create-container {
  position: relative;
  height: 100%;
  .create-header {
    height: 40px;
    margin-bottom: 20px;
    padding: 0 10px;
    flex-shrink: 0;
    .title {
      flex:1;
      font-size:17px;
      font-weight: bold;
      color:#333;
    }
    .close {
      display: block;
      width: 40px;
      height: 40px;
      margin-right: -10px;
      padding: 10px;
      cursor: pointer;
    }
  }
  .create-body {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    .create-item {
      flex: 0 0 50%;
      flex-shrink: 0;
      // overflow: hidden;
      padding-bottom: 10px;
    }
    .create-item2 {
        flex: 0 0 100%;
        flex-shrink: 0;
        // overflow: hidden;
        padding-bottom: 10px;
    }
    .create-block-item {
      flex: 0 0 100%;
      flex-shrink: 0;
      padding-bottom: 10px;
    }
    .create-item-label {
      margin: 5px 0;
      font-size: 14px;
      word-wrap: break-word; // 允许长单词换行
      word-break: break-all; // 允许在单词内换行
      .create-item-label-tips {
        font-size: 12px;
        padding-left: 2px;
        color: #999;
      }
    }
  }
  .create-flex {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
  }
  .create-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
  }
  .left {
    padding-right: 10px;
  }
  .right {
    padding-left: 10px;
  }
}
// 使选择器能够作用得“更深”，例如影响子组件
.el-form ::v-deep .el-form-item {
  margin-bottom: 0px;
}
.el-form-item ::v-deep .el-form-item__label {
  line-height: normal;
  font-size: 12px;
  font-weight: normal;
  color: #333333;
  position: relative;
  padding-left: 8px;
  padding-bottom: 0;
}
.el-form ::v-deep .el-form-item.is-required .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
  position: absolute;
  left: 0;
  top: 5px;
}

.handle-bar {
  position: relative;
  .handle-button {
    float: right;
    margin-top: 5px;
    margin-right: 20px;
  }
}

.el-button + .el-button {
  margin-left: 0;
}
::v-deep .el-button {
    line-height: 0.5;
}

.distpicker-address-wrapper ::v-deep select {
  height: 34px;
  font-size: 12px;
  border-radius: 0.1rem;
}

::v-deep .el-collapse-item__header {
    color: #fff ;
    background-color: #409eff;
    border: 1px solid #409eff;
    border-radius: 4px;
    padding: 0 10px;
    margin-bottom: 1px;
    height: 34px;
    line-height: 34px ;
}
::v-deep .el-divider--horizontal{
  margin: 2px 0;
}
::v-deep .el-collapse-item__content{
  padding-bottom: 2px;
}
::v-deep .el-row{
  margin-top: 5px;
}
</style>
